<script setup lang="ts">
import { LOGIN_URL } from '@/config/app'
import router from '@/router';
import { User, Edit, SwitchButton } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import {useUserStore} from "@/stores"
const userStore = useUserStore()

// 退出登录
const logout = () => {
	ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning"
	}).then(() => {
		router.replace(LOGIN_URL);
    userStore.logout()
		ElMessage({
			type: "success",
			message: "退出登录成功！"
		});
	});
};
</script>

<template>


  	<el-dropdown trigger="click">
  <div class="avatar">
    <img src="@/assets/images/avatar.png" alt="avatar" />
  </div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item >
					<el-icon><User /></el-icon>{{ $t("settings.topNavbar.avatar.info") }}
				</el-dropdown-item>
				<el-dropdown-item>
					<el-icon><Edit /></el-icon>{{ $t("settings.topNavbar.avatar.changePassword") }}
				</el-dropdown-item>
				<el-dropdown-item @click="logout" divided>
					<el-icon><SwitchButton /></el-icon>{{ $t("settings.topNavbar.avatar.logout") }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<style lang="scss" scoped>
.avatar {
  width: 2.5em;
  height: 2.5em;
  overflow: hidden;
  cursor: pointer;
  border-radius: 50%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
